<template>
  <div class="cinema_list">
    <Loading v-if="isLoading"/>
    <Scroller v-else>
    <div v-html="msg" class="list-wrap"></div>
    </Scroller>
  </div>
</template>

<script>
export default {
  name: "Clist",
  props:{
    cinemaVal:{
      type:Object
    }
  },
  data() {
    return {
      msg: "",
      isLoading:true,
      prevCityId:-1
    };
  },
  watch: {
    cinemaVal: {
      deep: true,
      handler: function (newVal) {
        this.axios.get("/ajax/ajax/moreCinemas?cityId="+newVal.cityId+"&hallType="+newVal.hallTypeId+"&brandId="+newVal.brandId+"&serviceId="+newVal.serviceId+'&districtId='+newVal.districtId+'&lineId='+newVal.lineId+"&stationId="+newVal.stationId+"&areaId"+newVal.areaId).then((res) => {
          if (res.statusText) {
            this.msg = res.data;
            this.isLoading=false;
            this.prevCityId = newVal.cityId;
          }
        });
      },
    },
  },
  activated() {
    var cityId = this.$store.state.city.id;
    if(this.prevCityId === cityId)return;
    this.axios.get("/ajax/ajax/moreCinemas?cityId="+cityId).then((res) => {
      console.log(res);
      if (res.statusText) {
        this.msg = res.data;
        this.isLoading=false;
        this.prevCityId = cityId;
      }
    });
  },
};
</script>

<style lang="scss">
a {
  text-decoration: none;
}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.cinema_list {
  overflow: hidden;
  .list-wrap {
    margin-top: 0px;
    min-height: 528px;
    .item {
      padding: 13px 15px 13px 0;
      margin-left: 15px;
      background-color: #fff;
      position: relative;
      overflow: hidden;
      .title-block {
        display: block;
        .title {
          height: 23px;
          line-height: 23px;
          font-size: 16px;
          color: #000;
        }
        .price-block {
          padding-top: 9px;
          padding-left: 3px;
          color: #f03d37;
          line-height: 1.5;
          .price {
            font-size: 18px;
          }
          .q {
            margin-left: 3px;
          }
        }
        .flex {
          flex: 1;
        }
        .location-block {
          margin-top: 6px;
          font-size: 13px;
          color: #666;
          display: flex;
          .flex {
            flex: 1;
          }
          .distance {
            margin-left: 5px;
          }
        }
        .label-block {
          height: 17px;
          line-height: 17px;
          margin-top: 4px;
          margin-bottom: 4px;
          overflow: hidden;
          font-size: 0;
          flex-shrink: 0;
          > div {
            position: relative;
            display: inline-block;
            padding: 0 3px;
            height: 15px;
            line-height: 15px;
            border-radius: 2px;
            font-size: 0.6rem;
            + div {
              margin-left: 5px;
            }
          }
          .allowRefund,
          .endorse,
          .hallType {
            color: #589daf;
            border: 1px solid #589daf;
          }
          .snack,
          .vipTag {
            color: #f90;
            border: 1px solid #f90;
          }
        }
        .discount-block {
          color: #999;
          margin-bottom: 4px;
          .discount-label {
            display: inline-flex;
            width: 15px;
            height: 14px;
            position: relative;
            top: 3px;
            img {
              width: 100%;
            }
          }
          .discount-label-text {
            margin-left: 0;
            font-size: 11px;
            display: inline-block;
          }
        }
      }
    }
  }
}
// .item{
//     flex: 1;
//     overflow: auto;
//     .title-block{
//         padding: 20px;
//         li{
//             border-bottom: 1px solid #e6e6e6;
//             margin-bottom: 20px;
//             div{
//                 margin-bottom: 10px;
//             }
//             .title{
//                 display: flex;
//                 justify-content: space-between;
//                 .q{
//                     margin-left: 5px;
//                     color: #f03d37;
//                     font-size: 11px;
//                 }
//                 .price{
//                     font-size: 18px;
//                 }
//             }
//             .address{
//                 font-size: 13px;
//                 color: #666;
//                 overflow: hidden;
//                 span:nth-child(1){
//                     display: block;
//                     width: 200px;
//                     text-overflow: ellipsis;
//                     overflow: hidden;
//                     white-space: nowrap;
//                 }
//                 span:nth-child(2){
//                     float: right;
//                 }
//             }
//             .card{
//                 display: flex;
//                 div{
//                     padding: 0 3px;
//                     margin-right: 5px;
//                     font-size: 13px;
//                     color: #f90;
//                     border: 1px solid #f90;
//                     border-radius: 2px;
//                     height: 15px;
//                     line-height: 15px;
//                 }
//             }
//         }
//     }
// }
</style>